<template>
  <div>
      <h1>购物车组件</h1>
      <h1>{{count}}</h1>
      <button @click="plus">加1</button>
      <h1>{{greet}}</h1>
      <button @click="myclick">变换数据</button>
      <h1>x轴:{{x}},y轴:{{y}}</h1>
  </div>
</template>
<script lang="ts">
// vue3 componentApi
import {onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onRenderTriggered} from 'vue'
import {ref,reactive,toRefs,watch,computed} from 'vue'
import {getPostion} from './hook/useMouse'
export default {
  // vue3 声明周期 在setup中的使用
  beforeMount() {
    
  },
  mounted() {
    
  },
  beforeDestroy() { //vue2 组件卸载前
    
  },
  beforeUnmount() { //vue3组件卸载
    
  },
  setup(){ 
      let datas=reactive({
        count:0,
        list:[1,2,3],
        plus:()=>{
          datas.count++
        }
      })
    // -----------------------------
    // 获取鼠标位置
    let {x,y}=getPostion();
    // -----------------------------
      let greet=ref("hello!")
      watch([greet,()=>datas.count],(newVal,oldVal)=>{
            console.log(newVal) //['hello!hello!hello!', 2]
            console.log(oldVal)// ['hello!hello!hello!', 1]
      })
      let myclick=()=>{
          greet.value+="hello!"
      }
      // ----------------------------
      onBeforeMount(()=>{ //组件挂载前
        console.log("组件挂载前")
      })
   
      onBeforeUpdate(()=>{ //组件更新前
          console.log("更新前")
      })
      onUpdated(()=>{//组件更新后
          console.log("更新后")
      })
      onBeforeUnmount(()=>{ //组件卸载前
        console.log("组件卸载前")
      })
      onUnmounted(()=>{ //组件卸载后
          console.log("卸载后")
      })
      onRenderTriggered((event)=>{ //监控页面重新渲染
        console.log(event.newValue)
        console.log(event.oldValue)
      })
      let mydata=toRefs(datas)
      return {
        ...mydata,
        greet,
        myclick,
        x,
        y
      }
  }
}
</script>
<style lang="less">
  
</style>